<template>
	<el-col 
		:xs="state.xs" :sm="state.sm" :md="state.md" :lg="state.lg" :xl="state.xl" 
		:class="{ 
			mb15: true, 
			'vp-search-col': true, 
			'vp-search-btn-col': btnCol, 
		}">
		<slot></slot>
	</el-col>
</template>
<script setup lang="ts" name="VpSearchCol">
import { reactive, onMounted } from 'vue';

const props = defineProps({
	btnCol: {
		type: Boolean,
		default: () => false,
	},
	showMore: {
		type: Boolean,
		default: () => false,
	},
	span: {
		type: Number,
		default: 4,
	},
});

const state = reactive({
	xs: 24,
	sm: 12,
	md: 8,
	lg: 6,
	xl: 6,
});

onMounted(() => {
	switch (props.span) {
		case 4:
			state.xs = 24;
			state.sm = 12;
			state.md = 8;
			state.lg = 6;
			state.xl = 6;
			break;
		case 3:
			state.xs = 24;
			state.sm = 24;
			state.md = 8;
			state.lg = 8;
			state.xl = 8;
			break;
		case 2:
			state.xs = 24;
			state.sm = 24;
			state.md = 12;
			state.lg = 12;
			state.xl = 12;
			break;
		case 1:
			state.xs = 24;
			state.sm = 24;
			state.md = 24;
			state.lg = 24;
			state.xl = 24;
			break;
		default:
			state.xs = 24;
			state.sm = 24;
			state.md = 12;
			state.lg = 6;
			state.xl = 6;
	}
});

</script>

<style scoped>
.vp-search-btn-col {
    margin-left: auto;
	display: flex;
	justify-content: flex-end;
}
</style>